<template>
	<div class="father">
		<h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 给子组件Child绑定事件 -->
		<!-- <button @click="test(1, 2, $event)">点击事件</button> -->
		<!-- <button @click="toy = $event">点击事件</button> -->

		<!-- 给子组件child绑定事件 -->
		<Child @send-toy="saveTony" />
	</div>
</template>

<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let toy = ref('')
//测试
// function test(a: number, b: number, c: Event) {
// 	console.log(a, b, c)
// }

function saveTony(xy: string) {
	console.log("saveTony", xy)
	toy.value = xy
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-right: 5px;
}
</style>